<template>
  <div class="One">
    <head-view>
      <span slot="left" @click="left"><i class="el-icon-arrow-left"></i></span>
      <span slot="center">商品详情</span>
    </head-view>
    <div>
      <div class="img">
        <img :src="require('../assets/img/' + this.$route.params.img)" alt="" />
      </div>
      <div class="font">{{ this.$route.params.title }}</div>
      <div class="btn"><button>加入购物车</button></div>
    </div>
  </div>
</template>

<script>
import HeadView from "./HeadView.vue";
import data from "../assets/json/data.json";
export default {
  data() {
    return {
      data,
    };
  },
  components: {
    HeadView,
  },
  methods: {
    left() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.One {
  height: 100vh;
}
.img {
  margin-top: 10px;
  width: 100%;
  height: 348px;
  background: #fff;
  img {
    height: 100%;
  }
}
.font {
  margin: 10px;
  font-size: 18px;
  font-weight: 700;
}
.btn {
  width: 156px;
  height: 40px;
  margin: 10px;
  button {
    border: 0;
    color: #fff;
    width: 100%;
    height: 40px;
    background: red;
  }
}
</style>
